$(document).ready(function()
{
	var oldPosition;
	var newPosition;
	var width;
	$(".mdgrid").mouseover(function()
	{
		$(this).parent().draggable({ disabled: false });
		$(".mdmain").text("Beweegbaar")
		
		$(".mdgrid").mousedown(function()
		{
			oldPosition = $(this).parent().position();
		});
	});
	
	$(".md").draggable({
		disabled: true,
		stop: function()
		{
			if($(this).position().left<1 || width-$(this).position().left<1 || $(this).position().top<1 || height-$(this).position().top<1)
			{
				$(this).animate(
				{
					left:oldPosition.left, top:oldPosition.top
				}, 250, function()
				{
					$(this).draggable({ disabled: false });
				});
			}
			$(".mdmain").text("Klaar");
		},
		start: function()
		{
			$(".mdmain").text("Gestart");
			width = $("#wrapper").width()-$(this).width();
			height = $("#wrapper").height()-$(this).height();
		},
		drag: function()
		{
			$(".mdmain").text("Bewegend")
		}
	});
	
	
	$(".mdgrid").mouseout(function()
	{
		$(this).parent().draggable({ disabled: true });
		$(".mdmain").text("Niet beweegbaar")
	});
});

/*
	<div class="mdn-resize"></div>
	<div class="mde-resize"></div>
	<div class="mds-resize"></div>
	<div class="mdw-resize"></div>
	<div class="mdnw-resize"></div>
	<div class="mdne-resize"></div>
	<div class="mdsw-resize"></div>
	<div class="mdse-resize"></div>
 */